import { appConfig, Modal as CoreModal, useModal } from '@idmy/core'
import { App, AppContext, h, render } from 'vue'
import RenderMain from './render-main.vue'
import ModalButton from './modal-button.vue'
import ModalPicker from './modal-picker.vue'

appConfig.modal.modalPicker = ModalPicker

const a = useModal()
const b = useModal()
const c = useModal()
const d = useModal()
const e = useModal()

const methods = {
	b,
	c,
	d,
	e,
}

const Modal = {
	...a,
	...methods,
	closes: async () => {
		await e.close()
		await d.close()
		await c.close()
		await b.close()
		await a.close()
	},
	install: (app: App) => {
		const vm = h(RenderMain, { items: [a, b, c, d, e] })
		vm.appContext = app._context ?? Modal._context
		render(vm, document.body)
		// @ts-ignore
		Object.keys(CoreModal).forEach(key => delete CoreModal[key])
		// @ts-ignore
		Object.keys(Modal).forEach(key => (CoreModal[key] = Modal[key]))
		console.info('init modal', CoreModal)
	},
	_context: null as AppContext | null,
}

export { Modal, ModalButton, ModalPicker }
